import { Routes, Route, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import WorksPage from './pages/WorksPage';
import UploadWorkPage from './pages/UploadWorkPage';
import CreateTeamPage from './pages/CreateTeamPage';
import MyTeamsPage from './pages/MyTeamsPage';
import AdminApprovalPage from './pages/AdminApprovalPage';
import ProtectedRoute from './components/ProtectedRoute';
import AdminRoute from './components/AdminRoute';
import useAuthStore from './store/authStore';

function App() {
  const { userInfo, logout } = useAuthStore();

  return (
    <>
      <nav style={{ padding: '1rem', borderBottom: '1px solid #ccc', marginBottom: '1rem', display: 'flex', gap: '1rem', alignItems: 'center' }}>
        {/* 公开链接 */}
        <Link to="/">首页</Link>
        <Link to="/works">作品</Link>

        {/* 登录用户可见的链接 */}
        {userInfo && (
          <>
            <Link to="/my-teams">我的小队</Link>
            <Link to="/upload-work">上传作品</Link>
          </>
        )}

        {/* 仅管理员可见的链接 */}
        {userInfo && userInfo.role === 'admin' && (
          <Link to="/admin/approve" style={{ fontWeight: 'bold' }}>审核作品</Link>
        )}

        {/* 根据登录状态切换显示 */}
        <div style={{ marginLeft: 'auto' }}>
          {userInfo ? (
            <>
              <span>你好, {userInfo.username}</span>
              <button onClick={logout} style={{ border: 'none', background: 'none', color: '#007bff', cursor: 'pointer', padding: '0', fontSize: 'inherit', marginLeft: '1rem' }}>
                退出登录
              </button>
            </>
          ) : (
            <>
              <Link to="/login">登录</Link>
              <span style={{ margin: '0 0.5rem' }}>|</span>
              <Link to="/register">注册</Link>
            </>
          )}
        </div>
      </nav>

      <main style={{ padding: '1rem' }}>
        <Routes>
          {/* --- 公开路由 --- */}
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />
          <Route path="/works" element={<WorksPage />} />

          {/* --- 受保护的成员路由 --- */}
          <Route
            path="/upload-work"
            element={
              <ProtectedRoute>
                <UploadWorkPage />
              </ProtectedRoute>
            }
          />
          <Route
            path="/create-team"
            element={
              <ProtectedRoute>
                <CreateTeamPage />
              </ProtectedRoute>
            }
          />
          <Route
            path="/my-teams"
            element={
              <ProtectedRoute>
                <MyTeamsPage />
              </ProtectedRoute>
            }
          />
          
          {/* --- 受保护的管理员路由 --- */}
          <Route
            path="/admin/approve"
            element={
              <AdminRoute>
                <AdminApprovalPage />
              </AdminRoute>
            }
          />
        </Routes>
      </main>
    </>
  );
}

export default App;